<style>
	.layui-tree-leaf.checked{
		background-color: #f2f2f2;
	}
	.layui-table-view{
		margin:0px 0px 0px 40px;
	}
</style>
<form class="page-list-form">
<!-- <div class="layui-collapse page-tips">
  <div class="layui-colla-item">
    <h2 class="layui-colla-title">温馨提示</h2>
    <div class="layui-colla-content">
      <p></p>
    </div>
  </div>
</div> -->
<div class="page-toolbar">
    <div class="layui-btn-group fl">
        
        <a href="{:url('add')}" class="layui-btn layui-btn-primary"><i class="aicon ai-tianjia"></i>添加</a>
        <a href="{:url('del?table=表名(无表前缀)')}" class="layui-btn layui-btn-primary j-page-btns confirm"><i class="aicon ai-jinyong"></i>删除</a>
        
    </div>
    <!-- <div class="page-filter fr">
        <form class="layui-form layui-form-pane" action="{:url()}" method="get">
        <div class="layui-form-item">
            <label class="layui-form-label">搜索</label>
            <div class="layui-input-inline">
                <input type="text" name="q" lay-verify="required" placeholder="请输入关键词搜索" autocomplete="off" class="layui-input">
            </div>
        </div>
        </form>
    </div> -->
</div>
<div class="layui-form">
	<div class="layui-row" style="min-height:500px;margin-top: 10px">
	<div class="layui-col-md2"  style="min-height:490px;border: 1px solid #e2e2e2;padding-right:15px">
		<ul id="department-tree"></ul>
	</div>
	<div class="layui-col-md9" style="">
	    <table id="user_data" lay-filter="userlist"></table>
	</div>
    
</div>
</form>
<script>
	var nodes = JSON.parse('{$depart_data}');
	var tree = null;
	var table = null;
	var tableIns = null;
	layui.use('tree', function(){
		tree = layui.tree;
		// console.log(tree)
		tree({
			elem: '#department-tree'	//元素选择器
			,click: function(ele){
				console.log(table);
				// ele.id
				tableIns.reload({
					where: { //设定异步数据接口的额外参数，任意设
					    depart_id: ele.id
					    //…
					  }
				})
			}
			,nodes: nodes	//数据
		});
	});

	layui.use('table', function(){
	  table = layui.table;
	  tableIns = table.render({
	    elem: '#user_data'
	    ,skin: 'row ' //行边框风格
		,even: true //开启隔行背景
	    ,height: 490
	    ,width: 906
	    ,url: '/admin.php/organize/department/staff' //数据接口
	    ,page: true //开启分页
	    ,loading: true 
	    ,done: function()
	    {

	    }
	    ,cols: [[ //表头
	      {field: 'id', title: 'ID', width:100, align:'center',sort: true, fixed: 'left'}
	      ,{field: 'username', title: '员工姓名', width:200, align:'center'}
	      ,{field: 'mobile', title: '员工手机', width:200, align:'center', sort: true}
	      ,{field: 'gender', title: '性别', width:200, align:'center',templet: '#gendertpl'} 
	      ,{field: '', title: '操作', width: 200, align:'center', fixed: 'right', toolbar: '#menutpl'}
	    ]]
	  });
	  
	});
	layui.use(['jquery'], function(args){
		// var $= layui.jquery;
		// console.log(layui.$)
		var $ = layui.$;
	})
	
		
		
		// var name = $(obj).prev().text();
		// layer.confirm('确认删除部门【'+name+'】吗？', {
		//   btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮
		//   ,btn3: function(index, layero){
		//     //按钮【按钮三】的回调
		//   }
		// }, function(index, layero){
		//   //按钮【按钮一】的回调
		// }, function(index){
		//   //按钮【按钮二】的回调
		// });
	var deldepart = function(id ,obj){
		layui.use(['jquery'], function(args){
			var $ = layui.$;
			console.log($(obj));
		})
	}
</script>
<script type="text/html" id="gendertpl">
  {{#  if(d.gender == 1){ }}
    男
  {{#  } else if(d.gender == 2) { }}
    女
  {{#  } else { }}
  	未知
  {{#  } }}
</script>
<script type="text/html" id="menutpl">
  <!-- <a class="layui-btn layui-btn-sm" lay-event="detail">查看</a> -->
  <a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除</a>
  
  <!-- 这里同样支持 laytpl 语法，如： -->
  <!-- {{#  if(d.auth > 2){ }}
    <a class="layui-btn layui-btn-mini" lay-event="check">审核</a>
  {{#  } }} -->
</script>